<%= tag.div class: "card-columns hide-scrollbar", data: {
      controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list",
      drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
      drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
      collapsible_columns_board_value: board.id,
      collapsible_columns_collapsed_class: "is-collapsed",
      collapsible_columns_no_transitions_class: "no-transitions",
      collapsible_columns_title_not_visible_class: "is-off-screen",
      navigable_list_supports_vertical_navigation_value: false,
      navigable_list_has_nested_navigation_value: true,
      navigable_list_prevent_handled_keys_value: true,
      navigable_list_auto_select_value: false,
      navigable_list_auto_scroll_value: false,
      action: "
        keydown->navigable-list#navigate
        dragstart->drag-and-drop#dragStart
        dragover->drag-and-drop#dragOver
        dragenter->drag-and-strum#dragEnter
        drop->drag-and-drop#drop
        dragend->drag-and-drop#dragEnd
        click@document->navigable-list#deselectWhenClickingOutside" } do %>
  <div class="card-columns__left">
    <%= render "boards/show/not_now", board: board %>
  </div>

  <%= render "boards/show/stream", board: board, page: page %>

  <div class="card-columns__right">
    <%= render partial: "boards/show/column", collection: board.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %>
    <%= render "boards/show/closed", board: board %>

    <%= render "boards/show/menu/columns", board: board %>
  </div>
<% end %>
